<template>
  <el-collapse-item
    v-if="selectedWidget?.type && widgetEventMap[selectedWidget.type]"
    name="3"
    :title="i18nt('designer.setting.eventSetting')"
  >
    <el-form-item
      v-for="eventName in filteredEventList"
      :key="eventName"
      :label="eventName"
      label-width="150px"
    >
      <el-button type="info" icon="el-icon-edit" plain round @click="editEvent(eventName)">
        {{ i18nt('designer.setting.addEventHandler') }}
      </el-button>
    </el-form-item>

    <!-- 弹窗 -->
    <el-dialog
      :title="i18nt('designer.setting.editEventHandler')"
      v-model="showDialog"
      :show-close="true"
      class="drag-dialog small-padding-dialog"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <el-alert type="info" :closable="false" :title="`${selectedWidget?.type}.${curEvent}()`" />
      <code-editor :mode="'javascript'" :readonly="false" v-model="codeBuffer" ref="codeEditor" />
      <el-alert type="info" :closable="false" title="}" />

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">{{ i18nt('designer.hint.cancel') }}</el-button>
          <el-button type="primary" @click="saveEventHandler">
            {{ i18nt('designer.hint.confirm') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-collapse-item>
</template>

<script>
import CodeEditor from '@/components/variant-form3/code-editor/index.vue'
import i18n from '@/utils/i18n'

export default {
  name: 'EventSettingPanel',
  components: { CodeEditor },
  mixins: [i18n],
  props: {
    selectedWidget: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      codeBuffer: '',
      localFormConfig: {},
      showDialog: false,
      curEvent: '',
      eventHandlerMap: {},
      widgetEventMap: {
        input: [
          'onCreated',
          'onMounted',
          'onInput',
          'onChange',
          'onFocus',
          'onBlur',
          'onValidate',
          'onAppendButtonClick'
        ],
        textarea: [
          'onCreated',
          'onMounted',
          'onInput',
          'onChange',
          'onFocus',
          'onBlur',
          'onValidate'
        ],
        number: ['onCreated', 'onMounted', 'onChange', 'onFocus', 'onBlur', 'onValidate'],
        radio: ['onCreated', 'onMounted', 'onChange', 'onValidate'],
        checkbox: ['onCreated', 'onMounted', 'onChange', 'onValidate'],
        select: [
          'onCreated',
          'onMounted',
          'onRemoteQuery',
          'onChange',
          'onFocus',
          'onBlur',
          'onValidate'
        ],
        time: ['onCreated', 'onMounted', 'onChange', 'onFocus', 'onBlur', 'onValidate'],
        'time-range': ['onCreated', 'onMounted', 'onChange', 'onFocus', 'onBlur', 'onValidate'],
        date: ['onCreated', 'onMounted', 'onChange', 'onFocus', 'onBlur', 'onValidate'],
        'date-range': ['onCreated', 'onMounted', 'onChange', 'onFocus', 'onBlur', 'onValidate'],
        switch: ['onCreated', 'onMounted', 'onChange', 'onValidate'],
        rate: ['onCreated', 'onMounted', 'onChange', 'onValidate'],
        color: ['onCreated', 'onMounted', 'onChange', 'onValidate'],
        slider: ['onCreated', 'onMounted', 'onChange', 'onValidate'],
        'static-text': ['onCreated', 'onMounted'],
        'html-text': ['onCreated', 'onMounted'],
        button: ['onCreated', 'onMounted', 'onClick'],
        divider: ['onCreated', 'onMounted'],
        'picture-upload': [
          'onCreated',
          'onMounted',
          'onBeforeUpload',
          'onUploadSuccess',
          'onUploadError',
          'onFileRemove',
          'onValidate'
        ],
        'file-upload': [
          'onCreated',
          'onMounted',
          'onBeforeUpload',
          'onUploadSuccess',
          'onUploadError',
          'onFileRemove',
          'onValidate'
        ],
        'rich-editor': ['onCreated', 'onMounted', 'onValidate'],
        cascader: ['onCreated', 'onMounted', 'onChange', 'onFocus', 'onBlur', 'onValidate']
      },
      eventParamsMap: {
        onCreated: 'onCreated() {',
        onMounted: 'onMounted() {',
        onClick: 'onClick(event) {',
        onInput: 'onInput(value) {',
        onChange: 'onChange(value) {',
        onBlur: 'onBlur(event) {',
        onFocus: 'onFocus(event) {',
        onValidate: 'onValidate(value) {',
        onAppendButtonClick: 'onAppendButtonClick(event) {',
        onRemoteQuery: 'onRemoteQuery(keyword) {',
        onBeforeUpload: 'onBeforeUpload(file) {',
        onUploadSuccess: 'onUploadSuccess(response, file) {',
        onUploadError: 'onUploadError(error, file) {',
        onFileRemove: 'onFileRemove(file) {'
      }
    }
  },
  computed: {
    filteredEventList() {
      const allEvents = this.widgetEventMap[this.selectedWidget?.type] || []
      return allEvents.filter((event) => this.selectedWidget?.options.hasOwnProperty(event))
    }
  },

  created() {},
  methods: {
    editEvent(eventName) {
      this.curEvent = eventName
      this.codeBuffer = this.selectedWidget?.options?.[eventName] || ''
      this.showDialog = true
    },
    saveEventHandler() {
      const hints = this.$refs.codeEditor.getEditorAnnotations?.() || []
      const hasError = hints.some((h) => h.type === 'error')

      if (hasError) {
        ElMessage.error(this.i18nt('designer.setting.syntaxCheckWarning'))
        return
      }

      if (this.curEvent) {
        const updatedWidget = { ...this.selectedWidget }
        updatedWidget.options = { ...updatedWidget.options, [this.curEvent]: this.codeBuffer }
        this.$emit('update:selected-widget', updatedWidget)
      }
      this.showDialog = false
    }
  }
}
</script>
